ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചർ: ഒരു ഫ്രെയിംവർക്ക് ഇംപ്ലിമെൻ്റേഷൻ ഗൈഡ്

ഇന്നത്തെ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്ന ലോകത്ത്, വേഗതയേറിയതും കാര്യക്ഷമവുമായ ഒരു വെബ് അനുഭവം നൽകുന്നത് വളരെ പ്രധാനമാണ്. ഉപയോക്താക്കൾ, അവരുടെ സ്ഥാനം, ഉപകരണം എന്നിവ പരിഗണിക്കാതെ, ആപ്ലിക്കേഷനുകൾ വേഗത്തിൽ ലോഡുചെയ്യുമെന്നും തടസ്സങ്ങളില്ലാതെ പ്രതികരിക്കുമെന്നും പ്രതീക്ഷിക്കുന്നു. ഈ ബ്ലോഗ് പോസ്റ്റ്, ഒരു ശക്തമായ ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചർ നിർമ്മിക്കുന്നതിനെക്കുറിച്ചും, ഫ്രെയിംവർക്ക് നടപ്പിലാക്കുന്നതിലും ആഗോള ഉപയോക്താക്കൾക്കായുള്ള ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളിലും ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.

ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസിൻ്റെ പ്രാധാന്യം മനസ്സിലാക്കൽ

ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളിൽ ജാവാസ്ക്രിപ്റ്റ് ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. ഡൈനാമിക് ഉള്ളടക്കം, ഉപയോക്തൃ ഇടപെടലുകൾ, സമ്പന്നമായ പ്രവർത്തനക്ഷമത എന്നിവ ഇത് സാധ്യമാക്കുന്നു. എന്നിരുന്നാലും, മോശമായി ഒപ്റ്റിമൈസ് ചെയ്ത ജാവാസ്ക്രിപ്റ്റ് പ്രകടനത്തെ സാരമായി ബാധിക്കും, ഇത് ഇനിപ്പറയുന്നവയിലേക്ക് നയിക്കുന്നു:

• വേഗത കുറഞ്ഞ ലോഡ് സമയം: ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ വലുതായിരിക്കാം, ഇത് പ്രാരംഭ പേജ് ലോഡിനെയും ടൈം ടു ഇൻ്ററാക്ടീവിനെയും (TTI) ബാധിക്കുന്നു.
• പ്രതികരണശേഷിയിലെ കുറവ്: സിപിയു-ഇൻ്റൻസീവ് ജാവാസ്ക്രിപ്റ്റ് ടാസ്ക്കുകൾക്ക് പ്രധാന ത്രെഡ് ബ്ലോക്ക് ചെയ്യാൻ കഴിയും, ഇത് ആപ്ലിക്കേഷൻ്റെ വേഗത കുറഞ്ഞതായി തോന്നിപ്പിക്കുന്നു.
• നെഗറ്റീവ് ഉപയോക്തൃ അനുഭവം: കുറഞ്ഞ പ്രകടനം ഉപയോക്താക്കളിൽ നിരാശയുണ്ടാക്കുകയും ഉയർന്ന ബൗൺസ് റേറ്റിലേക്ക് നയിക്കുകയും ചെയ്യുന്നു. വേഗത കുറഞ്ഞ വെബ്സൈറ്റുകൾ ഉപയോക്താക്കൾ ഉപേക്ഷിക്കാൻ സാധ്യതയുണ്ട്.
• എസ്ഇഒ-യിലെ സ്വാധീനം: സെർച്ച് എഞ്ചിനുകൾ വേഗതയേറിയ ലോഡിംഗ് സ്പീഡുള്ള വെബ്സൈറ്റുകൾക്ക് മുൻഗണന നൽകുന്നു, ഇത് സെർച്ച് റാങ്കിംഗിനെ ബാധിക്കാം.

ഈ പ്രശ്നങ്ങൾ ലഘൂകരിക്കുന്നതിനും ആഗോളതലത്തിൽ ഒരു നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനും നന്നായി നടപ്പിലാക്കിയ ഒരു പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചർ നിർണായകമാണ്. വിവിധ രാജ്യങ്ങളിലെ, വ്യത്യസ്ത ഇൻ്റർനെറ്റ് വേഗതയും ഉപകരണ ശേഷിയുമുള്ള ഉപയോക്താക്കൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുക എന്നതാണ് ഇതിനർത്ഥം.

ഒരു ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചറിൻ്റെ പ്രധാന ഘടകങ്ങൾ

ഒരു സമഗ്രമായ ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചറിൽ നിരവധി പ്രധാന ഘടകങ്ങൾ ഉൾപ്പെടുന്നു:

• പെർഫോമൻസ് മോണിറ്ററിംഗ്: തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങളുടെ ഫലപ്രാപ്തി അളക്കുന്നതിനും പ്രധാന പ്രകടന സൂചകങ്ങൾ (KPIs) തുടർച്ചയായി നിരീക്ഷിക്കുക.
• പ്രൊഫൈലിംഗ്: വേഗത കുറഞ്ഞ ഫംഗ്ഷനുകളും കാര്യക്ഷമമല്ലാത്ത ഭാഗങ്ങളും കണ്ടെത്താൻ കോഡ് എക്സിക്യൂഷൻ വിശകലനം ചെയ്യുക.
• ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ: കോഡ് സ്പ്ലിറ്റിംഗ്, ലേസി ലോഡിംഗ്, മിനിഫിക്കേഷൻ, കാഷിംഗ് തുടങ്ങിയ തന്ത്രങ്ങൾ നടപ്പിലാക്കുക.
• ബിൽഡ് ഓട്ടോമേഷൻ: ഒപ്റ്റിമൈസേഷനും വിന്യാസവും കാര്യക്ഷമമാക്കുന്നതിന് ബിൽഡ് പ്രോസസ്സുകൾ ഓട്ടോമേറ്റ് ചെയ്യുക.
• കണ്ടിന്യൂവസ് ഇൻ്റഗ്രേഷൻ/കണ്ടിന്യൂവസ് ഡിപ്ലോയ്മെൻ്റ് (CI/CD): പ്രകടനത്തിലെ തകർച്ച തടയുന്നതിന് ഡെവലപ്മെൻ്റ് പൈപ്പ്ലൈനിലേക്ക് പെർഫോമൻസ് പരിശോധനകൾ സംയോജിപ്പിക്കുക.

ഫ്രെയിംവർക്ക് തിരഞ്ഞെടുപ്പും പരിഗണനകളും

ശരിയായ ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്ക് തിരഞ്ഞെടുക്കുന്നത് പ്രകടനത്തെ കാര്യമായി സ്വാധീനിക്കും. React, Angular, Vue.js എന്നിവയാണ് ജനപ്രിയമായവ. ഓരോ ഫ്രെയിംവർക്കിനും പ്രകടനത്തിൻ്റെ കാര്യത്തിൽ അതിൻ്റേതായ ഗുണങ്ങളും ദോഷങ്ങളുമുണ്ട്, ഏറ്റവും അനുയോജ്യമായ തിരഞ്ഞെടുപ്പ് പ്രോജക്റ്റിൻ്റെ നിർദ്ദിഷ്ട ആവശ്യകതകളെ ആശ്രയിച്ചിരിക്കുന്നു.

• React: വെർച്വൽ DOM-ന് പേരുകേട്ട React, ശരിയായി ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ മികച്ച പ്രകടനം കാഴ്ചവെക്കാൻ കഴിയും. ഇതിൻ്റെ ഘടകാധിഷ്ഠിത ആർക്കിടെക്ചർ കോഡിൻ്റെ പുനരുപയോഗവും പരിപാലനവും പ്രോത്സാഹിപ്പിക്കുന്നു. React ആപ്ലിക്കേഷൻ്റെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് കോഡ് സ്പ്ലിറ്റിംഗ്, ലേസി ലോഡിംഗ് കമ്പോണൻ്റ്സ്, മെമ്മോയിസേഷൻ തുടങ്ങിയ ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. React-ൽ നിർമ്മിച്ച Next.js, Gatsby തുടങ്ങിയ ഫ്രെയിംവർക്കുകൾ സെർവർ-സൈഡ് റെൻഡറിംഗും സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷനും വാഗ്ദാനം ചെയ്യുന്നു, ഇത് പ്രാരംഭ ലോഡ് സമയങ്ങൾ ഗണ്യമായി മെച്ചപ്പെടുത്തും.
• Angular: ഡിപെൻഡൻസി ഇൻജെക്ഷൻ, ശക്തമായ ഒരു CLI തുടങ്ങിയ സവിശേഷതകളുള്ള ഒരു സമഗ്ര ഫ്രെയിംവർക്കാണ് Angular നൽകുന്നത്. Angular-ന് പഠിക്കാൻ കൂടുതൽ സമയമെടുക്കുമെങ്കിലും, അതിൻ്റെ ബിൽറ്റ്-ഇൻ ഒപ്റ്റിമൈസേഷൻ ടൂളുകളും എഹെഡ്-ഓഫ്-ടൈം (AOT) കംപൈലേഷനും ഉയർന്ന പ്രകടനമുള്ള ആപ്ലിക്കേഷനുകൾക്ക് കാരണമാകും. മികച്ച പ്രകടനത്തിനായി Angular-ൻ്റെ ചേഞ്ച് ഡിറ്റക്ഷൻ സ്ട്രാറ്റജികളും (OnPush) നിങ്ങളുടെ ടെംപ്ലേറ്റ് റെൻഡറിംഗും ഒപ്റ്റിമൈസ് ചെയ്യുക.
• Vue.js: Vue.js അതിൻ്റെ എളുപ്പത്തിലുള്ള ഉപയോഗത്തിനും പ്രകടനത്തിനും പേരുകേട്ടതാണ്. ഇതിന് ഒരു ചെറിയ ഫുട്ട്പ്രിൻ്റുണ്ട് കൂടാതെ മികച്ച റിയാക്റ്റിവിറ്റി വാഗ്ദാനം ചെയ്യുന്നു. സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകളും ഇൻ്ററാക്ടീവ് യൂസർ ഇൻ്റർഫേസുകളും നിർമ്മിക്കുന്നതിൽ Vue.js മികച്ചുനിൽക്കുന്നു. മികച്ച പ്രകടനത്തിനായി Vue.js-ൻ്റെ വെർച്വൽ DOM, ഒപ്റ്റിമൈസ് ചെയ്ത റെൻഡറിംഗ്, കമ്പോണൻ്റ് അടിസ്ഥാനമാക്കിയുള്ള ആർക്കിടെക്ചർ എന്നിവ പ്രയോജനപ്പെടുത്തുക. Vue.js-ൽ നിർമ്മിച്ച Nuxt.js പോലുള്ള ഫ്രെയിംവർക്കുകൾ സെർവർ-സൈഡ് റെൻഡറിംഗ്, സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ തുടങ്ങിയ സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു, ഇത് മെച്ചപ്പെട്ട ലോഡ് സമയങ്ങൾക്ക് കാരണമാകുന്നു.

ഫ്രെയിംവർക്ക്-നിർദ്ദിഷ്ട പരിഗണനകൾ: നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്ക് തിരഞ്ഞെടുക്കുമ്പോൾ ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

• ബണ്ടിൽ സൈസ്: ചെറിയ ബണ്ടിൽ വലുപ്പങ്ങൾ വേഗതയേറിയ ലോഡ് സമയങ്ങളിലേക്ക് നയിക്കുന്നു. ഓരോ ഫ്രെയിംവർക്കിനും വ്യത്യസ്തമായ പ്രാരംഭ ബണ്ടിൽ വലുപ്പമുണ്ട്.
• റെൻഡറിംഗ് പെർഫോമൻസ്: ഫ്രെയിംവർക്ക് റെൻഡറിംഗും DOM അപ്ഡേറ്റുകളും എങ്ങനെ കൈകാര്യം ചെയ്യുന്നുവെന്ന് മനസ്സിലാക്കുക. React, Vue.js പോലുള്ള വെർച്വൽ DOM അടിസ്ഥാനമാക്കിയുള്ള ഫ്രെയിംവർക്കുകൾ നേരിട്ടുള്ള DOM മാനിപുലേഷനേക്കാൾ വേഗതയേറിയതാണ്.
• കമ്മ്യൂണിറ്റിയും ഇക്കോസിസ്റ്റവും: വലുതും സജീവവുമായ ഒരു കമ്മ്യൂണിറ്റി പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനായി ധാരാളം വിഭവങ്ങളും ലൈബ്രറികളും ടൂളുകളും നൽകുന്നു.
• സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR), സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ (SSG): SSR, SSG ഫ്രെയിംവർക്കുകൾ (Next.js, Gatsby, Nuxt.js) സെർവറിൽ HTML പ്രീ-റെൻഡർ ചെയ്യുന്നതിലൂടെ പ്രാരംഭ ലോഡ് സമയങ്ങളും SEO-യും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും. വേഗത കുറഞ്ഞ ഇൻ്റർനെറ്റ് കണക്ഷനുകളോ ഉപകരണങ്ങളോ ഉള്ള ഉപയോക്താക്കൾക്ക് ഇത് നിർണായകമാണ്.

പെർഫോമൻസ് മോണിറ്ററിംഗ് നടപ്പിലാക്കൽ

ഫലപ്രദമായ പെർഫോമൻസ് മോണിറ്ററിംഗ് ഏതൊരു ഒപ്റ്റിമൈസേഷൻ തന്ത്രത്തിൻ്റെയും അടിസ്ഥാന ശിലയാണ്. ഇത് എങ്ങനെ നടപ്പിലാക്കാമെന്ന് താഴെക്കൊടുക്കുന്നു:

• ശരിയായ ടൂളുകൾ തിരഞ്ഞെടുക്കുക: ജാവാസ്ക്രിപ്റ്റ് പ്രകടനം നിരീക്ഷിക്കുന്നതിന് നിരവധി ടൂളുകൾ ലഭ്യമാണ്, അവയിൽ ചിലത്:
  • Web Vitals: ഗൂഗിളിൻ്റെ Web Vitals വെബ് പ്രകടനം അളക്കുന്നതിനുള്ള സ്റ്റാൻഡേർഡ് മെട്രിക്കുകൾ നൽകുന്നു (Largest Contentful Paint - LCP, First Input Delay - FID, Cumulative Layout Shift - CLS, Time to First Byte - TTFB, Time to Interactive - TTI).
  • Performance API: ബ്രൗസറിൻ്റെ Performance API ലോഡിംഗ് പ്രക്രിയയെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ നൽകുന്നു, ഇതിൽ വിവിധ റിസോഴ്സുകളുടെയും ഇവൻ്റുകളുടെയും ടൈമിംഗ് ഡാറ്റ ഉൾപ്പെടുന്നു.
  • Application Performance Monitoring (APM) ടൂളുകൾ: New Relic, Dynatrace, Datadog പോലുള്ള APM ടൂളുകൾ റിയൽ യൂസർ മോണിറ്ററിംഗ് (RUM), എറർ ട്രാക്കിംഗ് എന്നിവയുൾപ്പെടെ സമഗ്രമായ നിരീക്ഷണം വാഗ്ദാനം ചെയ്യുന്നു. ഈ ടൂളുകൾക്ക് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രകടനം തത്സമയം ട്രാക്ക് ചെയ്യാനും വേഗത കുറഞ്ഞ പേജ് ലോഡുകൾ, പിശകുകൾ, പ്രകടനത്തിലെ തടസ്സങ്ങൾ എന്നിവയെക്കുറിച്ചുള്ള ഉൾക്കാഴ്ചകൾ നൽകാനും കഴിയും.
  • ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ: Chrome DevTools (മറ്റ് ബ്രൗസറുകളിലെ സമാന ടൂളുകൾ) ശക്തമായ പ്രൊഫൈലിംഗ്, പെർഫോമൻസ് അനാലിസിസ് സവിശേഷതകൾ നൽകുന്നു.
• പ്രധാന മെട്രിക്കുകൾ ട്രാക്ക് ചെയ്യുക: ഇനിപ്പറയുന്ന പോലുള്ള നിർണായക പ്രകടന മെട്രിക്കുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക:
  • ലോഡ് സമയം: പേജ് പൂർണ്ണമായി ലോഡ് ചെയ്യാൻ എടുക്കുന്ന സമയം.
  • First Contentful Paint (FCP): ആദ്യത്തെ ഉള്ളടക്കം റെൻഡർ ചെയ്യാൻ എടുക്കുന്ന സമയം.
  • Largest Contentful Paint (LCP): ഏറ്റവും വലിയ ഉള്ളടക്ക ഘടകം റെൻഡർ ചെയ്യാൻ എടുക്കുന്ന സമയം.
  • Time to Interactive (TTI): പേജ് പൂർണ്ണമായും ഇൻ്ററാക്ടീവ് ആകാൻ എടുക്കുന്ന സമയം.
  • First Input Delay (FID): ഒരു ഉപയോക്താവിൻ്റെ ആദ്യ ഇടപെടലും ബ്രൗസറിൻ്റെ പ്രതികരണവും തമ്മിലുള്ള കാലതാമസം.
  • Cumulative Layout Shift (CLS): പേജ് ലോഡിംഗ് സമയത്ത് ഉണ്ടാകുന്ന അപ്രതീക്ഷിതമായ ലേഔട്ട് ഷിഫ്റ്റിൻ്റെ അളവ്.
  • ജാവാസ്ക്രിപ്റ്റ് അഭ്യർത്ഥനകളുടെ എണ്ണം: ലോഡ് ചെയ്യുന്ന ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളുടെ എണ്ണം.
  • ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ സമയം: ബ്രൗസർ ജാവാസ്ക്രിപ്റ്റ് കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ ചെലവഴിക്കുന്ന സമയം.
  • മെമ്മറി ഉപയോഗം: ആപ്ലിക്കേഷൻ ഉപയോഗിക്കുന്ന മെമ്മറിയുടെ അളവ്.
  • പിശകുകളുടെ നിരക്ക്: ജാവാസ്ക്രിപ്റ്റ് പിശകുകളുടെ ആവൃത്തി.
• റിയൽ യൂസർ മോണിറ്ററിംഗ് (RUM) നടപ്പിലാക്കുക: RUM യഥാർത്ഥ ഉപയോക്താക്കളിൽ നിന്ന് പ്രകടന ഡാറ്റ ശേഖരിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വിവിധ പരിതസ്ഥിതികളിലും വിവിധ ഉപകരണങ്ങളിലും എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള വിലയേറിയ ഉൾക്കാഴ്ചകൾ നൽകുന്നു. ആഗോളതലത്തിൽ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• അലേർട്ടുകൾ സജ്ജീകരിക്കുക: പ്രകടന മെട്രിക്കുകൾ സ്വീകാര്യമായ പരിധിക്ക് താഴെയാകുമ്പോൾ നിങ്ങളെ അറിയിക്കാൻ അലേർട്ടുകൾ കോൺഫിഗർ ചെയ്യുക. ഇത് പ്രശ്നങ്ങൾ മുൻകൂട്ടി പരിഹരിക്കാനും പ്രകടനത്തിലെ തകർച്ച തടയാനും സഹായിക്കുന്നു.
• പതിവായ ഓഡിറ്റുകൾ: Google PageSpeed Insights അല്ലെങ്കിൽ WebPageTest പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പ്രകടനം പതിവായി ഓഡിറ്റ് ചെയ്യുക. ഈ ടൂളുകൾ ഒപ്റ്റിമൈസേഷനായി ശുപാർശകൾ നൽകുന്നു.

ഉദാഹരണം: ജാവാസ്ക്രിപ്റ്റിൽ ലോഡ് സമയം അളക്കാൻ Performance API ഉപയോഗിക്കുന്നത്:

            const startTime = performance.now();

// ... your code ...

const endTime = performance.now();
const loadTime = endTime - startTime;
console.log("Load time: " + loadTime + "ms");

            

              
                Copy
              
            
          

പെർഫോമൻസ് പ്രൊഫൈലിംഗും വിശകലനവും

പ്രൊഫൈലിംഗ് എന്നാൽ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിൻ്റെ പ്രകടനം വിശകലനം ചെയ്ത് തടസ്സങ്ങൾ കണ്ടെത്തുക എന്നതാണ്. ഇതിൽ പലപ്പോഴും ഇവ ഉൾപ്പെടുന്നു:

• ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക: പെർഫോമൻസ് പ്രൊഫൈലുകൾ റെക്കോർഡ് ചെയ്യാനും വിശകലനം ചെയ്യാനും Chrome DevTools (അല്ലെങ്കിൽ മറ്റ് ബ്രൗസറുകളിലെ സമാന ടൂളുകൾ) ഉപയോഗിക്കുക. പെർഫോമൻസ് ടാബ് നിങ്ങളെ സിപിയു, മെമ്മറി, നെറ്റ്‌വർക്ക് ആക്റ്റിവിറ്റി എന്നിവ റെക്കോർഡ് ചെയ്യാൻ അനുവദിക്കുന്നു.
• വേഗത കുറഞ്ഞ ഫംഗ്ഷനുകൾ കണ്ടെത്തുക: എക്സിക്യൂട്ട് ചെയ്യാൻ ഏറ്റവും കൂടുതൽ സമയമെടുക്കുന്ന ഫംഗ്ഷനുകൾ കണ്ടെത്തുക.
• കോൾ സ്റ്റാക്കുകൾ വിശകലനം ചെയ്യുക: എക്സിക്യൂഷൻ ഫ്ലോ മനസ്സിലാക്കുകയും ഒപ്റ്റിമൈസേഷൻ ആവശ്യമുള്ള ഭാഗങ്ങൾ തിരിച്ചറിയുകയും ചെയ്യുക.
• മെമ്മറി പ്രൊഫൈലിംഗ്: പ്രകടനത്തെ ബാധിച്ചേക്കാവുന്ന മെമ്മറി ലീക്കുകളും കാര്യക്ഷമമല്ലാത്ത കാര്യങ്ങളും കണ്ടെത്തുക.
• നെറ്റ്‌വർക്ക് അനാലിസിസ്: വേഗത കുറഞ്ഞ റിസോഴ്‌സുകൾ കണ്ടെത്താൻ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ വിശകലനം ചെയ്യുക.

ഉദാഹരണം: Chrome DevTools-ൽ കോഡ് പ്രൊഫൈൽ ചെയ്യുന്നത്:

1. Chrome DevTools തുറക്കുക (വലത്-ക്ലിക്ക് ചെയ്ത് "Inspect" തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ കീബോർഡ് ഷോർട്ട്കട്ട് F12 ഉപയോഗിക്കുക).
2. "Performance" ടാബിലേക്ക് പോകുക.
3. "Record" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
5. "Stop" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
6. പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താൻ റെക്കോർഡ് ചെയ്ത പ്രൊഫൈൽ വിശകലനം ചെയ്യുക.

ജാവാസ്ക്രിപ്റ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്തിക്കഴിഞ്ഞാൽ, ഇനിപ്പറയുന്ന ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ നടപ്പിലാക്കുക:

• കോഡ് സ്പ്ലിറ്റിംഗ്: നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുക. ഇത് പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുന്നു. React, Angular, Vue.js പോലുള്ള ഫ്രെയിംവർക്കുകൾ കോഡ് സ്പ്ലിറ്റിംഗ് നേരിട്ട് പിന്തുണയ്ക്കുന്നു.
• ലേസി ലോഡിംഗ്: റിസോഴ്‌സുകൾ ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യുക. ചിത്രങ്ങൾ, വീഡിയോകൾ, ഓഫ്-സ്ക്രീൻ ഉള്ളടക്കം എന്നിവയ്ക്ക് ഇത് പ്രത്യേകിച്ചും ഫലപ്രദമാണ്.
• മിനിഫിക്കേഷൻ: വൈറ്റ്‌സ്‌പേസ്, കമൻ്റുകൾ എന്നിവ നീക്കം ചെയ്തും വേരിയബിൾ പേരുകൾ ചെറുതാക്കിയും നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളുടെ വലുപ്പം കുറയ്ക്കുക. UglifyJS അല്ലെങ്കിൽ Terser പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക.
• കംപ്രഷൻ: നെറ്റ്‌വർക്കിലൂടെ കൈമാറ്റം ചെയ്യുമ്പോൾ വലുപ്പം കുറയ്ക്കുന്നതിന് Gzip അല്ലെങ്കിൽ Brotli ഉപയോഗിച്ച് ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ കംപ്രസ് ചെയ്യുക.
• കാഷിംഗ്: കൂടെക്കൂടെ ഉപയോഗിക്കുന്ന റിസോഴ്‌സുകൾ പ്രാദേശികമായി സംഭരിക്കുന്നതിന് കാഷിംഗ് തന്ത്രങ്ങൾ നടപ്പിലാക്കുക, ഇത് സെർവറിൽ നിന്ന് ആവർത്തിച്ച് ഡൗൺലോഡ് ചെയ്യേണ്ട ആവശ്യം കുറയ്ക്കുന്നു. HTTP കാഷിംഗ്, സർവീസ് വർക്കറുകൾ, ലോക്കൽ സ്റ്റോറേജ് എന്നിവ ഉപയോഗിക്കുക.
• ഡിബൗൺസിംഗും ത്രോട്ടിലിംഗും: അമിതമായ എക്സിക്യൂഷൻ തടയുന്നതിന് ഇവൻ്റ് ഹാൻഡ്‌ലറുകളുടെ ആവൃത്തി നിയന്ത്രിക്കുക. സ്ക്രോളിംഗ്, റീസൈസിംഗ് പോലുള്ള ഇവൻ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: അനുയോജ്യമായ ഫോർമാറ്റുകൾ (WebP) ഉപയോഗിച്ചും, കംപ്രസ് ചെയ്തും, റെസ്പോൺസീവ് ഇമേജുകൾ ഉപയോഗിച്ചും ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക.
• DOM മാനിപുലേഷനുകൾ കുറയ്ക്കുക: DOM മാനിപുലേഷനുകളുടെ എണ്ണം കുറയ്ക്കുക, കാരണം അവ ചെലവേറിയതാകാം. വെർച്വൽ DOM, ബാച്ച് അപ്‌ഡേറ്റുകൾ എന്നിവ ഉപയോഗിക്കുക.
• ഉപയോഗിക്കാത്ത കോഡ് നീക്കം ചെയ്യുക: ബണ്ടിൽ വലുപ്പം കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ കോഡ്‌ബേസിൽ നിന്ന് ഉപയോഗിക്കാത്ത കോഡ് പതിവായി നീക്കം ചെയ്യുക.
• കാര്യക്ഷമമായ ഇവൻ്റ് ഹാൻഡ്‌ലിംഗ്: ഇവൻ്റ് ഡെലിഗേഷൻ ഉപയോഗിക്കുക, അനാവശ്യ ഇവൻ്റ് ലിസണറുകൾ ഒഴിവാക്കുക.
• തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകളുടെ സ്വാധീനം ശ്രദ്ധാപൂർവ്വം വിലയിരുത്തുക, സാധ്യമെങ്കിൽ ലേസി ലോഡിംഗ് അല്ലെങ്കിൽ അസിങ്ക് ലോഡിംഗ് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. Google Analytics, പരസ്യ നെറ്റ്‌വർക്കുകൾ, സോഷ്യൽ മീഡിയ പ്ലാറ്റ്‌ഫോമുകൾ എന്നിവ പോലുള്ള സേവനങ്ങളിൽ നിന്നുള്ള തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ പ്രകടനത്തെ കാര്യമായി ബാധിക്കും.

ഉദാഹരണം: React-ൽ `React.lazy`, `Suspense` എന്നിവ ഉപയോഗിച്ച് കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നത്:

            
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

            

              
                Copy
              
            
          

ബിൽഡ് ഓട്ടോമേഷനും കണ്ടിന്യൂവസ് ഇൻ്റഗ്രേഷൻ/കണ്ടിന്യൂവസ് ഡിപ്ലോയ്മെൻ്റും (CI/CD)

ഒപ്റ്റിമൈസേഷനും വിന്യാസവും കാര്യക്ഷമമാക്കുന്നതിന് നിങ്ങളുടെ ബിൽഡ് പ്രോസസ്സ് ഓട്ടോമേറ്റ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. CI/CD പൈപ്പ്ലൈനുകൾ ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോയിലേക്ക് പെർഫോമൻസ് പരിശോധനകൾ സംയോജിപ്പിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

• ബിൽഡ് ടൂളുകൾ ഉപയോഗിക്കുക: കോഡ് സ്പ്ലിറ്റിംഗ്, മിനിഫിക്കേഷൻ, ബണ്ട്ലിംഗ് തുടങ്ങിയ ജോലികൾ ഓട്ടോമേറ്റ് ചെയ്യാൻ Webpack, Parcel, അല്ലെങ്കിൽ Rollup പോലുള്ള ബിൽഡ് ടൂളുകൾ ഉപയോഗിക്കുക.
• പെർഫോമൻസ് പരിശോധനകൾ സംയോജിപ്പിക്കുക: പ്രകടനത്തിലെ തകർച്ച തടയുന്നതിന് നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിലേക്ക് പെർഫോമൻസ് പരിശോധനകൾ ഉൾപ്പെടുത്തുക. Lighthouse, WebPageTest പോലുള്ള ടൂളുകൾ നിങ്ങളുടെ CI/CD വർക്ക്ഫ്ലോയിൽ സംയോജിപ്പിക്കാൻ കഴിയും.
• ഓട്ടോമേറ്റഡ് ഡിപ്ലോയ്മെൻ്റ്: ഒപ്റ്റിമൈസ് ചെയ്ത കോഡ് വേഗത്തിലും കാര്യക്ഷമമായും വിന്യസിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഡിപ്ലോയ്മെൻ്റ് പ്രക്രിയ ഓട്ടോമേറ്റ് ചെയ്യുക.
• വേർഷൻ കൺട്രോൾ: നിങ്ങളുടെ കോഡ് മാനേജ് ചെയ്യാനും മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യാനും Git പോലുള്ള വേർഷൻ കൺട്രോൾ സിസ്റ്റങ്ങൾ ഉപയോഗിക്കുക.

ഉദാഹരണം: ഒരു CI/CD പൈപ്പ്ലൈനിലേക്ക് Lighthouse സംയോജിപ്പിക്കുന്നത്:

1. Lighthouse ഒരു ഡെവലപ്മെൻ്റ് ഡിപെൻഡൻസിയായി ഇൻസ്റ്റാൾ ചെയ്യുക.
2. നിങ്ങളുടെ വെബ്സൈറ്റിനെതിരെ Lighthouse പ്രവർത്തിപ്പിക്കാൻ ഒരു സ്ക്രിപ്റ്റ് ഉണ്ടാക്കുക.
3. ഓരോ ബിൽഡിന് ശേഷവും ഈ സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കാൻ നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈൻ കോൺഫിഗർ ചെയ്യുക.
4. പ്രകടനത്തിലെ പ്രശ്നങ്ങൾ കണ്ടെത്താൻ Lighthouse റിപ്പോർട്ട് വിശകലനം ചെയ്യുക.

ആഗോള ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ

ഒരു ആഗോള ഉപയോക്താക്കൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് പ്രകടനത്തിൻ്റെ സാങ്കേതിക വശങ്ങൾക്കപ്പുറമുള്ള ഘടകങ്ങൾ പരിഗണിക്കേണ്ടതുണ്ട്:

• കണ്ടൻ്റ് ഡെലിവറി നെറ്റ്‌വർക്ക് (CDN): നിങ്ങളുടെ ഉള്ളടക്കം ലോകമെമ്പാടുമുള്ള ഒന്നിലധികം സെർവറുകളിലായി വിതരണം ചെയ്യാൻ ഒരു CDN ഉപയോഗിക്കുക. ഇത് ഉപയോക്താക്കൾക്ക് ഏറ്റവും അടുത്തുള്ള സെർവറിൽ നിന്ന് നിങ്ങളുടെ ഉള്ളടക്കം ആക്‌സസ് ചെയ്യാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു, ഇത് ലേറ്റൻസി കുറയ്ക്കുന്നു.
• ഇൻ്റർനാഷണലൈസേഷൻ (i18n), ലോക്കലൈസേഷൻ (l10n): നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വ്യത്യസ്ത ഭാഷകളിലേക്കും പ്രദേശങ്ങളിലേക്കും പൊരുത്തപ്പെടുത്തുന്നതിന് i18n, l10n എന്നിവ നടപ്പിലാക്കുക. ഇതിൽ ടെക്സ്റ്റ് വിവർത്തനം ചെയ്യുക, തീയതികളും കറൻസികളും ഫോർമാറ്റ് ചെയ്യുക, വ്യത്യസ്ത സമയ മേഖലകൾ കൈകാര്യം ചെയ്യുക എന്നിവ ഉൾപ്പെടുന്നു. ഇൻ്റർനാഷണലൈസേഷനായി i18next അല്ലെങ്കിൽ React Intl പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുക.
• റെസ്പോൺസീവ് ഡിസൈൻ: ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾ മൊബൈൽ ഫോണുകളും ടാബ്‌ലെറ്റുകളും ഉൾപ്പെടെ വിവിധ ഉപകരണങ്ങൾ ഉപയോഗിച്ച് ഇൻ്റർനെറ്റ് ആക്‌സസ് ചെയ്യുന്നതിനാൽ, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ റെസ്പോൺസീവ് ആണെന്നും വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കും ഉപകരണങ്ങൾക്കും അനുയോജ്യമാണെന്നും ഉറപ്പാക്കുക.
• സെർവർ ലൊക്കേഷൻ: നിങ്ങളുടെ ലക്ഷ്യമിടുന്ന പ്രേക്ഷകർക്ക് ഭൂമിശാസ്ത്രപരമായി അടുത്തുള്ള സ്ഥലങ്ങളിൽ നിങ്ങളുടെ സെർവറുകൾ ഹോസ്റ്റ് ചെയ്യുന്നത് പരിഗണിക്കുക.
• മൊബൈലിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: ലോകത്തിൻ്റെ പല ഭാഗങ്ങളിലും ഇൻ്റർനെറ്റ് ആക്‌സസ് ചെയ്യുന്നതിനുള്ള ഒരു പ്രാഥമിക മാർഗ്ഗമാണ് മൊബൈൽ ഉപകരണങ്ങൾ. മൊബൈൽ ഉപകരണങ്ങളിൽ സുഗമമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കാൻ മൊബൈൽ ഒപ്റ്റിമൈസേഷന് മുൻഗണന നൽകുക. ഇതിൽ ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക, ജാവാസ്ക്രിപ്റ്റ് വലുപ്പം കുറയ്ക്കുക, അനാവശ്യ ആനിമേഷനുകൾ ഒഴിവാക്കുക എന്നിവ ഉൾപ്പെടുന്നു.
• വിവിധ പ്രദേശങ്ങളിലെ പ്രകടനം നിരീക്ഷിക്കുക: വിവിധ ഭൂമിശാസ്ത്രപരമായ പ്രദേശങ്ങളിലെ പ്രകടനം നിരീക്ഷിക്കാനും ഒപ്റ്റിമൈസേഷനുള്ള മേഖലകൾ കണ്ടെത്താനും RUM ടൂളുകൾ ഉപയോഗിക്കുക.
• നെറ്റ്‌വർക്ക് അവസ്ഥകൾ പരിഗണിക്കുക: ലോകമെമ്പാടുമുള്ള വ്യത്യസ്ത നെറ്റ്‌വർക്ക് അവസ്ഥകളെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക. ഫയൽ വലുപ്പങ്ങൾ കുറച്ചും പ്രോഗ്രസീവ് ലോഡിംഗ് പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിച്ചും വേഗത കുറഞ്ഞ ഇൻ്റർനെറ്റ് കണക്ഷനുകൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുക.
• പ്രവേശനക്ഷമത (Accessibility): WCAG മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിച്ച്, വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ആക്സസ് ചെയ്യാവുന്നതാണെന്ന് ഉറപ്പാക്കുക. ചിത്രങ്ങൾക്ക് ആൾട്ടർനേറ്റീവ് ടെക്സ്റ്റ് നൽകുക, സെമാൻ്റിക് HTML ഉപയോഗിക്കുക, ശരിയായ കീബോർഡ് നാവിഗേഷൻ ഉറപ്പാക്കുക എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. ഉയർന്ന ബാൻഡ്‌വിഡ്ത്ത് ഇൻ്റർനെറ്റ് കണക്ഷനുകളിലേക്ക് പരിമിതമായ പ്രവേശനമുള്ള പ്രദേശങ്ങളിലുള്ളവർ ഉൾപ്പെടെ എല്ലാ ഉപയോക്താക്കൾക്കും പ്രവേശനക്ഷമത ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു.

ഉദാഹരണം: i18next ഉപയോഗിച്ച് i18n നടപ്പിലാക്കുന്നത്:

            
import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        'hello': 'Hello',
      }
    },
    es: {
      translation: {
        'hello': 'Hola',
      }
    }
  }
});

console.log(i18next.t('hello')); // Output: Hello (if language is set to English)
console.log(i18next.t('hello')); // Output: Hola (if language is set to Spanish)

            

              
                Copy
              
            
          

പരിശോധനയും ആവർത്തനവും

പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ ഒരു ആവർത്തന പ്രക്രിയയാണ്. നിങ്ങളുടെ നടപ്പാക്കൽ തുടർച്ചയായി പരിശോധിച്ച് മെച്ചപ്പെടുത്തുക.

• A/B ടെസ്റ്റിംഗ്: ഏതൊക്കെ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളാണ് ഏറ്റവും ഫലപ്രദമെന്ന് നിർണ്ണയിക്കാൻ വ്യത്യസ്ത തന്ത്രങ്ങൾ പരീക്ഷിക്കുക.
• ഉപയോക്തൃ ഫീഡ്‌ബэк: മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ കണ്ടെത്തുന്നതിന് ഉപയോക്താക്കളിൽ നിന്ന് ഫീഡ്‌ബэк ശേഖരിക്കുക.
• പതിവായ ഓഡിറ്റുകൾ: നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ പതിവായി ഓഡിറ്റ് ചെയ്യുക.
• അപ്‌ഡേറ്റായിരിക്കുക: ഏറ്റവും പുതിയ പെർഫോമൻസ് മികച്ച രീതികളും ഫ്രെയിംവർക്ക് അപ്‌ഡേറ്റുകളും ഉപയോഗിച്ച് കാലികമായിരിക്കുക. ജാവാസ്ക്രിപ്റ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള പുതിയ ടെക്നിക്കുകളും ടൂളുകളും നിരന്തരം ഉയർന്നുവരുന്നു. ഫ്രെയിംവർക്കുകൾ തന്നെ പ്രകടന മെച്ചപ്പെടുത്തലുകളോടെ പുതിയ പതിപ്പുകൾ പുറത്തിറക്കുന്നു.

ഉപസംഹാരം

ആഗോള പ്രേക്ഷകർക്ക് വേഗതയേറിയതും കാര്യക്ഷമവുമായ ഒരു വെബ് അനുഭവം നൽകുന്നതിന് ശക്തമായ ഒരു ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് ഇൻഫ്രാസ്ട്രക്ചർ നടപ്പിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. പെർഫോമൻസ് മോണിറ്ററിംഗ്, പ്രൊഫൈലിംഗ്, ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ, ബിൽഡ് ഓട്ടോമേഷൻ എന്നിവയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും. ഒപ്റ്റിമൈസേഷൻ ഒരു തുടർ പ്രക്രിയയാണെന്ന് ഓർക്കുക. സാധ്യമായ ഏറ്റവും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് തുടർച്ചയായി നിരീക്ഷിക്കുകയും വിശകലനം ചെയ്യുകയും ആവർത്തിക്കുകയും ചെയ്യുക. ഉപയോക്തൃ സംതൃപ്തിക്കും മത്സരാധിഷ്ഠിത ആഗോള വിപണിയിൽ നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെയോ ആപ്ലിക്കേഷൻ്റെയോ വിജയത്തിനും പ്രകടനത്തോടുള്ള ഈ പ്രതിബദ്ധത നിർണായകമാണ്.